<template>
  <div class="size-full pt-[40px]">

    <div class="absolute top-[4px] left-0" @click="handleClick">
      <ul class="flex">
        <li data-tg="HotWork" :class="{ active: activeName == 'HotWork' }">动火</li>
        <li data-tg="ConfinedSpace" :class="{ active: activeName == 'ConfinedSpace' }">受限空间</li>
        <li data-tg="BlindPlatePlugging" :class="{ active: activeName == 'BlindPlatePlugging' }">盲板抽堵</li>
        <li data-tg="Height" :class="{ active: activeName == 'Height' }">高处</li>
        <li data-tg="Lifting" :class="{ active: activeName == 'Lifting' }">吊装</li>
        <li data-tg="TemporaryElectricity" :class="{ active: activeName == 'TemporaryElectricity' }">临时用电</li>
        <li data-tg="GroundBreaking" :class="{ active: activeName == 'GroundBreaking' }">动土</li>
        <li data-tg="OpenCircuit" :class="{ active: activeName == 'OpenCircuit' }">断路</li>
        <li data-tg="BigTicket" :class="{ active: activeName == 'BigTicket' }">大票</li>
      </ul>
    </div>

    <ticket :config="configObj" :apiParams="{ licenseId: 'SX202506260002', workPlanId: '01jynpp69fx3gan8vexda9ft71' }"
      :type="activeName" :apiHeader="{ Authorization: 'Bearer e3fc7901-ed25-4563-952d-85a75d8bee5e' }" />

  </div>
</template>

<script setup>
import ticket from '@/components/ticket.vue'
import conf from '@/config/'

const activeName = ref('ConfinedSpace')
const configObj = ref(conf.getConfig(activeName.value))

function handleClick(e) {
  activeName.value = e.target.closest('li').dataset.tg

  configObj.value = conf.getConfig(activeName.value)
}

</script>

<style scoped>
ul {
  li {
    background-color: lightgrey;
    padding: 4px 10px;
    border-radius: 5px;
    margin-left: 20px;
    cursor: pointer;
  }

  li.active {
    color: blue;
    font-weight: bold;
    background-color: ghostwhite;
    cursor: default;
  }
}
</style>
